<template>
	<div class="bgBox flexcenter">
		<!-- 根据试卷状态判断高度 -->
		<div class="contentBox ffffff border positionr" style="height: 80vh;">
			<div class="blueBg"></div>
			<div class="textBox border">
				<div class="titleBox text_ht color_three">{{dataAll.name}}</div>
				<!-- 根据试卷是待改卷还是已出分数判断内边距 -->
				<div class="mainpadding15 ffffff">
					<!-- 开始考试 -->
					<div class="flexbetween">
						<div class="flexleft">
							<i class="el-icon-alarm-clock" style="color: #3478F5;font-size: 20px;"></i>
							<div class="text_d color_zero margin_left1">考试时间：{{dataAll.duration}}分钟</div>
						</div>
						<div class="text_d color_zero margin_left1">试卷总分：{{dataAll.total_score}}分</div>
					</div>
					<!-- 已出分数 -->
					<div class="flexbottom  color_theme" v-if="dataAll.state==3">
						<span style="font-size: 50px;">{{dataAll.result_score}}</span>
						<span style="font-size: 18px;">分</span>
					</div>
					<!-- 待改卷 -->
					<div class="flexcenter margin_top2"  v-if="dataAll.state==2">
						<div class="color_orange text_et">待改卷</div>
					</div>
					<!-- 已出分数、待改卷都有 -->
					<div class="flexcenter margin_top1">
						<div class="line"></div>
					</div>
					<div class="topicBox margin_top2" >
						<div class="flexbetween mainpadding15 line_bottom" v-if="dataAll.state==3">
							<div class="flexcenter" style="width: 33.3%;">
								<div class="textcenter">
									<div class="text_d color_theme">{{dataAll.correct_num}}</div>
									<div class="text_d color_three margin_top1">答对</div>
								</div>
							</div>
							<div class="flexcenter" style="width: 33.3%;">
								<div class="textcenter">
									<div class="text_d color_red">{{dataAll.wrong_num}}</div>
									<div class="text_d color_three margin_top1">答错</div>
								</div>
							</div>
							<div class="flexcenter" style="width: 33.3%;">
								<div class="textcenter">
									<div class="text_d color_nine">{{dataAll.notdone_num}}</div>
									<div class="text_d color_three margin_top1">未答</div>
								</div>
							</div>
						</div>
						<div class="flexbetween topicItem line_bottom">
							<div class="text_d color_three">题数</div>
							<div class="text_d color_theme">{{dataAll.total_num}}题</div>
						</div>
						<div class="flexbetween topicItem line_bottom">
							<div class="text_d color_three">满分</div>
							<div class="text_d color_theme">{{dataAll.total_score}}分</div>
						</div>
						<div class="flexbetween topicItem " :class="dataAll.username?'line_bottom':''">
							<div class="text_d color_three">答卷用时</div>
							<div class="text_d color_theme">{{dataAll.use_duration}}分钟</div>
						</div>
						<div class="flexbetween topicItem" v-if="dataAll.username">
							<div class="text_d color_three">交卷老师</div>
							<div class="text_d color_theme">{{dataAll.username}}</div>
						</div>
					</div>
					<div class="flexcenter margin_top">
						<div class="themeBtnbrSmall margin_right2" @click="home">返回首页</div>
						<div class="themeBtnbr" v-if="dataAll.state!=2" @click="chakansj">查看试卷</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { start_show } from "@/API/examination"
	export default {
		data() {
			return {
				education_lesson_id: "",
				student_examination_id: "",
				dataAll: {},
			}
		},
		created() {
			this.education_lesson_id = this.$route.query.id
			if (this.$route.query.student_examination_id) {
				this.student_examination_id = this.$route.query.student_examination_id
			}
			this.init()
		},
		methods: {
			home(){
				this.$router.push({
					path:"/"
				})
			},
			init() {
				start_show({
					education_lesson_id: this.education_lesson_id,
					student_examination_id: this.student_examination_id
				}).then(res => {
					this.dataAll = res.data.data
				})
			},
			chakansj() {
				this.$router.push({
					path: "/seePaper",
					query:{
						education_lesson_id:this.education_lesson_id,
						student_examination_id:this.student_examination_id
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bgBox {
		width: 100vw;
		height: calc(100vh - 85px);
		background-image: url("../../static/image/test/testBg.png");
		background-size: 100%;
	}

	.contentBox {
		width: 30vw;

	}

	.blueBg {
		width: 100%;
		height: 280px;
		border-radius: 16px 16px 0 0;
		background-image: url("../../static/image/test/blueBg.png");
		background-size: 100%;
	}

	.textBox {
		position: absolute;
		top: 30px;
		left: 30px;
		right: 30px;
	}

	.titleBox {
		padding: 20px;
		text-align: center;
		background: #F2F2F3;
		border-radius: 16px 16px 0px 0px;
	}

	.line {
		width: 34px;
		height: 5px;
		background: rgba(52, 120, 245, .1);
	}

	.topicBox {
		padding: 0 15px;
		background: #F8F8FA;
		border-radius: 10px;

		.topicItem {
			padding: 15px 0;
		}
	}

	.enterBtn {
		width: 239px;
		height: 47px;
		background: #3478F5;
		border-radius: 8px 8px 8px 8px;
		font-size: 18px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.themeBtnbr {
		padding: 10px 50px;
		background-color: #3478F5;
		border-radius: 8px;
		border: 1px solid #3478F5;
		font-size: 12px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}

	.themeBtnbrSmall {
		padding: 10px 50px;
		background: rgba(52, 120, 245, 0.1);
		border-radius: 8px;
		border: 1px solid #3478F5;
		font-size: 12px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478F5;
	}
</style>